<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.mc.lp.view.constants.*;"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<div ng-controller="GradeMappingController as gmc" ng-init="getDetails()">
	<div class="modal fade" id="mappingModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">Create New Grade Mapping</h4>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-3">Grade:</div>
						<div class="col-md-2">
							<select class="form-control input-sm" ng-model="gradeVo.gradeId" ng-change="criteriaChanged()" ng-options="c.id as c.value for c in gradeList"></select>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3">Start Year</div>
						<div class="col-md-3">
							<input type="text" ng-model="gradeVo.startYear">
						</div>
					</div>
					<div class="row">
						<div class="col-md-3">End Year:</div>
						<div class="col-md-3">
							<input type="text" ng-model="gradeVo.endYear">
						</div>
					</div>
					<div class="row">
						<div class='clearfix'>&nbsp;</div>
					</div>
					<div class="row" ng-show="isError">
						<div class="col-md-12">
							<div class="alert alert-warning">{{error}}</div>
						</div>
					</div>
					
					<div class="row">
						<div class="col-md-12">
							<span class="pull-right"><button class="btn btn-success" ng-click="saveMapping()">Save Mapping</button></span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<!-- File Upload modal -->
	<div class="row sm-font">

		<div class="col-md-12">
			<div class="panel panel-success">
				<div class="panel-heading">
					<h3 class="panel-title sm-font">
						<b>Create Grade Mapping</b>
					</h3>
				</div>
				<div class="panel-body">
					<div class="row" ng-show="showGradeMappingList">
						<table class="table table-responsive sm-font">
							<thead>
								<tr>
									<th>Grade</th>
									<th>Start Year</th>
									<th>End Year</th>
									<th>Action</th>
								</tr>
							</thead>
							<tbody>
								<tr ng-repeat="row in gradeMappingList">
									<td>{{row.gradeName}}</td>
									<td>{{row.startYear}}</td>
									<td>{{row.endYear}}</td>
									<td><span class="fa fa-times md-font" style="color:red;cursor:pointer" ng-click="deleteRow(row)" ></span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="fa fa-edit md-font" ng-click="edit(row)" style="cursor:pointer"></span></td>
								</tr>
								<tr>
									<td colspan="4">
										<button class="btn btn-primary" ng-click="showMappingModel()">
											<span class="pull-right">Add New</span>
										</button>
									</td>
								</tr>
							</tbody>

						</table>
					</div>
					<div class="row">
						<div class="col-md-12 col-xs-12 col-sm-12" ng-show="!showGradeMappingList">No Record Exists, please add grade mapping</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</div>